<template>
  <el-container class="app-container">
    <el-header class="app-header">
      <div class="header-content">
        <h3 class="app-title">
          <el-icon><VideoCamera /></el-icon>
          数字人视频背景替换工具
        </h3>
        <div class="header-nav">
          <el-menu
              :default-active="activeMenu"
              mode="horizontal"
              :ellipsis="false"
              @select="handleMenuSelect"
          >
            <el-menu-item
                v-for="item in menuItems"
                :key="item.index"
                :index="item.index"
            >
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>

    <el-main class="app-main">
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Clock, Film, Setting, User, VideoCamera, Picture } from "@element-plus/icons-vue";

const route = useRoute()
const router = useRouter()

// 菜单项配置
const menuItems = ref([
  {
    index: '/compose',
    title: '视频合成',
    icon: Film
  },
  {
    index: '/human-library',
    title: '数字人库',
    icon: User
  },
  {
    index: '/material-library',
    title: '素材库',
    icon: Picture
  },
  {
    index: '/history',
    title: '历史记录',
    icon: Clock
  },
  {
    index: '/settings',
    title: '系统设置',
    icon: Setting
  }
])

// 当前激活的菜单项
const activeMenu = computed(() => {
  // 确保路径匹配
  const currentPath = route.path
  const foundItem = menuItems.value.find(item => item.index === currentPath)
  return foundItem ? foundItem.index : currentPath
})

// 显式处理菜单选择
const handleMenuSelect = async (index) => {
  // console.log('菜单选择:', index)

  // 防止重复导航到同一路由
  if (route.path === index) {
    return
  }

  try {
    await router.push(index)
    // 确保 DOM 更新完成
    await nextTick()
  } catch (error) {
    console.error('路由导航失败:', error)
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: auto !important;
  padding: 0;
  // 确保头部有足够的 z-index
  z-index: 1000;
  position: relative;
}

.header-content {
  padding: 20px;
}

.app-title {
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;

  .el-icon {
    color: #667eea;
  }
}

.header-nav {
  .el-menu {
    border: none;

    // 确保菜单项有足够的点击区域
    .el-menu-item {
      font-size: 16px;
      min-width: 120px;
      padding: 0 20px;
      height: 56px;
      line-height: 56px;
      // 确保点击区域正确
      cursor: pointer;
      user-select: none;

      // 防止点击穿透
      position: relative;
      z-index: 1;

      &.is-active {
        color: #667eea;
        font-weight: 600;
        background-color: rgba(102, 126, 234, 0.1);
      }

      &:hover {
        background-color: rgba(102, 126, 234, 0.05);
      }

      // 确保图标和文字的布局
      .el-icon {
        margin-right: 8px;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }
    }
  }
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: transparent;
}

// 全局卡片样式
.page-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
}

// 全局按钮样式增强
.el-button {
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    // 移除可能影响点击的 transform
    // transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

// 修复可能的点击问题
.el-menu--horizontal > .el-menu-item {
  // 确保菜单项不会被其他元素遮挡
  position: relative;
  z-index: 2;
}
</style>